<!--
  @author nowind
  @since 17/07/23 14:34
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common::jscss"/>
<title>新增或编辑产品</title>
</head>
<body>
<div class="layui-fluid">

    <div class="layui-card">

        <div class="layui-card-body">

            <form method="post" action="" class="layui-form" lay-filter="zmn-form">

                <input type="hidden" name="spId" th:value="${spId}"/>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">城市：</label>
                    <div class="layui-input-inline">
                        <select id="cityId" lay-filter="cityId" name="cityId" lay-search lay-verify="required">
                            <option value="">-选择-</option>
                            <option th:each="city:${cityList}"
                                    th:value="${city.value}"
                                    th:text="${city.text}"/>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">服务分类：</label>
                    <div class="layui-input-inline">
                        <select id="servCategId" name="servCategId" lay-filter="servCategId" lay-search lay-verify="required">
                            <option value="">-选择-</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">一级分类：</label>
                    <div class="layui-input-inline">
                        <select id="categOneId" name="categOneId" lay-filter="categOneId" lay-search lay-verify="required">
                            <option value="">-选择-</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width:100px">
                        <input type="text" id="categOneStock" name="categOneStock" placeholder="库存预警量" oninput="value=value.replace(/[^\d]/g,'');if(value>100000)value=100000;if(value<0)value=0;"
                           lay-verType="tips" autocomplete="off" class="layui-input" maxlength="6"/>
                    </div>
                    <div class="layui-input-inline" style="width:120px">
                        <input type="text" id="categOneCoefficient" name="categOneCoefficient" placeholder="预警节假日系数" lay-verify="range"
                           lay-verType="tips" autocomplete="off" class="layui-input" maxlength="6"/>
                    </div>
                    <div class="layui-input-inline" style="width:100px">
                        <input type="text" id="categOneProportion" name="categOneProportion" placeholder="库存比例" oninput="value=value.replace(/[^\d]/g,'');if(value>100)value=100;if(value<0)value=0;"
                               lay-verType="tips" autocomplete="off" class="layui-input" maxlength="6"/>
                    </div>
                    <div class="layui-input-inline" style="width: 8px;padding-top: 7px;padding-bottom: 7px;margin-left: -25px;">%</div>
                    <div class="layui-input-inline">
                        <span class="layui-form-label" style="width: auto; color: #9F9F9F;">此处为批量设置</span>
                    </div>
                </div>
                <hr class="layui-bg-gray">

                <div class="layui-split">&nbsp;</div>
                <div class="layui-form-item" id="categTwoDiv">

                </div>

                <div class="layui-form-item submit">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="zmn-form-submit">保存</button>
                        <a class="layui-btn layui-btn-primary" onclick="zmnLayUtil.closeThisIframe(parent,{reloadPage: true})">取消</a>
                    </div>
                </div>

                <div class="layui-split">&nbsp;</div>

            </form>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" th:inline="javascript">
    var json = {
        spId: [[${spId}]],
        spName: [[${spName}]],
    };
    layui.config({
        version: 202005121817,
        base: "/static/lay/"
    }).extend({
        index: "lib/index"
    }).use(['index', 'form', 'table', 'laypage', 'layedit', 'laytpl'], function(){
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laypage = layui.laypage;
        var layedit = layui.layedit;
        var laytpl = layui.laytpl;

        spConfig.laySelectCity(form, "/plat/sp/config/listServCategBySpIdAndCity.action", "cityId", "servCategId");
        spConfig.laySelectSpecial(form, "/plat/sp/config/listCategOneByManageCompanyIdAndServCategIdAndShowTypeAndCityId.action", "/plat/sp/config/listCategTwoByManageCompanyIdAndServAndCategOneIdAndShowTypeAndCityId.action", "servCategId", "categOneId", "categTwoId",
        function(items){
            let html = '';
            for(let item of items){
                let categTwoHtml = `<div class="layui-inline">
                                        <label class="layui-form-label">${item.text} :</label>
                                        <div class="layui-input-inline" style="width: 100px;">
                                            <input type="text" name="categTwoStock" lay-verify="required" placeholder="库存预警量" oninput="value=value.replace(/[^\\d]/g,'');if(value>100000)value=100000;if(value<0)value=0;" maxlength="6" categTwoId="${item.value}" categTwoName="${item.text}" value="" autocomplete="off" class="layui-input"/>
                                        </div>
                                        <div class="layui-input-inline" style="width: 120px;">
                                            <input type="text" name="categTwoCoefficient" lay-verify="required"  placeholder="预警节假日系数" maxlength="6" lay-verify="range" categTwoId="${item.value}" categTwoName="${item.text}" value="" autocomplete="off" class="layui-input"/>
                                        </div>
                                        <div class="layui-input-inline" style="width: 100px;">
                                            <input type="text" name="categTwoProportion" lay-verify="required"  placeholder="库存比例" oninput="value=value.replace(/[^\\d]/g,'');if(value>100)value=100;if(value<0)value=0;" maxlength="6" categTwoId="${item.value}" categTwoName="${item.text}" value="" autocomplete="off" class="layui-input"/>
                                        </div>
                                        <div class="layui-input-inline" style="width: 8px;padding-top: 7px;padding-bottom: 7px;margin-left: -25px;">%</div>
                                    </div>`;
                html += categTwoHtml;
            }
            $('#categTwoDiv').html(html);
        });

        $("#categOneStock").blur(function(){
            let categOneStock = document.getElementsByName("categOneStock");
            let categTwoStock = document.getElementsByName("categTwoStock");
            for(var i=0; i < categTwoStock.length; i++){
                categTwoStock[i].value=categOneStock[0].value;
            }
        });

        $("#categOneCoefficient").blur(function(){
            let categOneCoefficient = document.getElementsByName("categOneCoefficient");
            let categTwoCoefficient = document.getElementsByName("categTwoCoefficient");
            for(var i=0; i < categTwoCoefficient.length; i++){
                categTwoCoefficient[i].value=categOneCoefficient[0].value;
            }
        });

        $("#categOneProportion").blur(function(){
            let categOneProportion = document.getElementsByName("categOneProportion");
            let categTwoProportion = document.getElementsByName("categTwoProportion");
            for(var i=0; i < categTwoProportion.length; i++){
                categTwoProportion[i].value=categOneProportion[0].value;
            }
        });

        // 自定义验证规则
        form.verify({
            range: function(value){
                if (value == null || value == undefined || value == ''){
                    return;
                }
                var reg = new RegExp("^(([1-9][0-9]*)|(([0]\\.\\d{1,1}|[1-9][0-9]*\\.\\d{1,1})))$");
                if(!reg.test(value)){
                    return "请输入正确的格式!最多保留一位小数";
                }
                if(parseFloat(value) < 0.6 || parseFloat(value) > 3){
                    return "系数值不符合规定,系数值范围0.6~3.0";
                }
            }
        });

        // 提交
        form.on('submit(zmn-form-submit)', function(obj){
            var data = obj.field;

            let spId = json.spId;
            let spName = json.spName;
            let cityId = data.cityId;
            let cityName = $("#cityId").find("option:selected").text();
            let servCategId = data.servCategId;
            let servCategName = $("#servCategId").find("option:selected").text();
            let categOneId = data.categOneId;
            let categOneName = $("#categOneId").find("option:selected").text();

            let categTwoStock = document.getElementsByName("categTwoStock");
            let categTwoCoefficient = document.getElementsByName("categTwoCoefficient");
            let categTwoProportion = document.getElementsByName("categTwoProportion");
            let categTwoArr = new Array();
            for(var i=0; i < categTwoStock.length; i++){
                let categTwo = new Object();
                categTwo["spId"] = spId;
                categTwo["spName"] = spName;
                categTwo["cityId"] = cityId;
                categTwo["cityName"] = cityName;
                categTwo["servCategId"] = servCategId;
                categTwo["servCategName"] = servCategName;
                categTwo["categOneId"] = categOneId;
                categTwo["categOneName"] = categOneName;

                categTwo["categTwoId"] = $(categTwoStock[i]).attr("categTwoId");
                categTwo["categTwoName"] = $(categTwoStock[i]).attr("categTwoName");
                categTwo["stock"] = categTwoStock[i].value;
                categTwo["coefficient"] = categTwoCoefficient[i].value;
                categTwo["proportion"] = categTwoProportion[i].value;
                categTwoArr.push(categTwo);
            }

            var url = "/plat/sp/warning/config/saveBatchSet.action";
            $.ajax({
                async: false,
                type: "POST", url: url,
                contentType: "application/json", dataType: "json", data: JSON.stringify(categTwoArr),
                success:function(resp) {
                    if(resp.status == 200) {
                        zmnPage.reload('操作成功!', 1000);
                    }else{
                        layer.msg(resp.message,{icon: 2});
                    }
                },
                error:function(XMLHttpRequest, status, errorThrown){}
            });
            return false;
        });
    });


    var spConfig = {
        /**
         * 多级下拉框联动
         * @param form layui.form
         * @param url1 selectOneId请求下级数据的url，返回数据格式 [[value,text], [value,text], [value,text], …]
         * @param url1 selectTwoId请求下级数据的url，返回数据格式 [[value,text], [value,text], [value,text], …]
         * @param selectOneId 第1级select的ID，不含#号
         * @param selectTwoId 第2级select的ID，不含#号
         * @param selectThrId 第3级select的ID，不含#号，如无第3级则两级联动
         */
        laySelectSpecial: function (form, url1, url2, selectOneId, selectTwoId, selectThrId, selectTwoOperator) {
            let $ = layui.$;
            form.on("select(" + selectOneId + ")", function (obj) {
                if (zmnUtil.isNull(obj) || obj.value == 0) {
                    return;
                }
                let servCategId = obj.value;
                let cityId = $("#cityId").val()
                $.ajax({
                    type: "GET", url: url1,
                    dataType: "json", data: {servCategId: servCategId, cityId: cityId, spId: json.spId},
                    success: function (result) {
                        let items = result.data;
                        if (items == null) {
                            $("#" + selectTwoId).html("");
                            $("#" + selectThrId).html("");
                            form.render("select");
                            return;
                        }
                        var optionHtml = '<option value="">选择</option>';
                        for (var i = 0; i < items.length; i++) {
                            optionHtml += '<option value="' + items[i].value + '">' + items[i].text + '</option>';
                        }
                        $("#" + selectTwoId).html(optionHtml);
                        $("#" + selectThrId).html("");
                        form.render("select");
                    }
                });
            });
            if (zmnUtil.isEmptyNull(selectThrId)) {
                return;
            }
            ;

            form.on("select(" + selectTwoId + ")", function (obj) {
                if (zmnUtil.isNull(obj) || obj.value == 0) {
                    return;
                }
                let categOneId = obj.value;
                let servCategId = $('#servCategId').val();
                let cityId = $("#cityId").val();
                $.ajax({
                    type: "GET", url: url2,
                    dataType: "json", data: {servCategId: servCategId, categOneId: categOneId, cityId: cityId, spId: json.spId},
                    success: function (result) {
                        let items = result.data;
                        let defaultOperator = function(){
                            if (items == null) {
                                $("#" + selectThrId).html("");
                                form.render("select");
                                return;
                            }
                            var optionHtml = '<option value="">选择</option>';
                            for (var i = 0; i < items.length; i++) {
                                optionHtml += '<option value="' + items[i].value + '">' + items[i].text + '</option>';
                            }
                            $("#" + selectThrId).html(optionHtml);
                            form.render("select");
                        }
                        if(selectTwoOperator){
                            selectTwoOperator(items);
                        }else{
                            defaultOperator();
                        }
                    }
                });
            });
        },
        laySelectCity: function (form, url, selectOneId, selectTwoId) {
            let $ = layui.$;
            form.on("select(" + selectOneId + ")", function (obj) {
                if (zmnUtil.isNull(obj) || obj.value == 0) {
                    return;
                }
                let cityId = obj.value;
                $.ajax({
                    type: "GET", url: url,
                    dataType: "json", data: {cityId: cityId, spId: json.spId},
                    success: function (result) {
                        let items = result.data;
                        var optionHtml = '<option value="">选择</option>';
                        for (var i = 0; i < items.length; i++) {
                            optionHtml += '<option value="' + items[i].categId + '">' + items[i].name + '</option>';
                        }
                        $("#" + selectTwoId).html(optionHtml);
                        $("#categOneId").html("");
                        $("#categId").html("");
                        form.render("select");
                    }
                });
            });
        }
    }


</script>